<template>
  <div class="instrumentPanel">
     <div class="" style="">
       <div class="balance">
          <div class="">
            <div v-if="ImageShow == false" style="">
              <span style="color: #fff;font-size: 12px;cursor: pointer;">{{$t('page.user.Balance')}}</span>
              <img @click="Image" src="../../utils/img/biyan.png" alt="" style="display: inline-block; width: 16px;cursor: pointer;">
              <span style="display: block; font-size: 26px;font-weight: 600;color:#f89900;">******</span>
            </div>
            <div v-else>
              <span style="color: #fff;font-size: 12px;cursor: pointer;">{{$t('page.user.Balance')}}</span>
              <img @click="Image" src="../../utils/img/eyes.png" alt="" style="display: inline-block; width: 16px;cursor: pointer;">
              <span style="display: block; font-size: 26px;font-weight: 600;color:#f89900;">{{userInfo.now_money || 0}}</span>
            </div>
          </div>
       </div>
       <div class="count">
          <div class="count-item">
             <div class="">
               <span style="font-size: 18px; color: #f89900;">{{this.listcount}}</span>
               <p style="font-size: 12px; color: #000;">{{$t('page.user.FavoriteProducts')}}</p>
             </div>
          </div>
          <div class="count-item">
             <div class="">
               <span style="font-size: 18px; color: #f89900;">{{this.storeListcount}}</span>
               <p style="font-size: 12px; color: #000;">{{$t('page.user.Followthestore')}}</p>
             </div>
          </div>
       </div>
       <div class="visit">
          <div class="visit-title">
             {{$t('page.user.Followthestore')}}
          </div>
          <div class="el-empty">
            <!-- <li v-if="list.length >0" v-for="(item,index) in list" :key="index" >
              <div class="hd">
                <div class="img-box"><img :src="item.spu.image" alt=""></div>
                <div class="info line2">{{item.spu.store_name}}</div>
              </div>
              <div class="bd">
                <el-button @click="offCollect(item.type_id,index)">{{$t('page.index.unfavorite')}}</el-button>
                <el-button @click="goPage(item.spu.product_id, item)" v-if="item.type < 2">{{$t('page.index.onView')}}</el-button>
              </div>
            </li> -->
            <div class="">
              <img src="~assets/images/noorder.png" alt="">
              <p style="color: #909399;">{{$t('page.user.Nodatafound')}}</p>
            </div>
          </div>
       </div>
     </div>
     <div class="recharge">
        <div class="box-btn" @click="goRecharge()">
           <div>{{$t('page.user.Deposit')}}</div>
           <img src="../../utils/img/shang.png" alt="" style=" width:32px;height:32px;margin-top: 8px;">
        </div>
        <div class="visit" style="margin-top: 20px;">
           <div class="visit-title">
              {{$t('page.user.FavoriteProducts')}}
           </div>
           <div class="el-empty">
             <div class="">
               <img src="~assets/images/noorder.png" alt="">
               <p style="color: #909399;">{{$t('page.user.Nodatafound')}}</p>
             </div>
           </div>
        </div>
     </div>
     <div class="recharge">
       <div class="box-btn" @click="goReflect()">
          <div>{{$t('page.user.Withdraw')}}</div>
          <img src="../../utils/img/shang.png" alt="" style=" width:32px;height:32px;margin-top: 8px;">
       </div>
       <div class="visit" style="margin-top: 20px;">
          <div class="visit-title">
             {{$t('page.user.Defaultaddress')}}
          </div>
          <div v-if="list.length > 0" class="">
            <li v-for="(item,index) in list" :index="index" :style="index == list.length - 1?'':'border-bottom: 1px solid #eeeeee;'">
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <div style="margin: 10px;">
                   <div class="" style="display: flex;color: #333333;font-weight: 400;">
                      <div class="" style="color: #999999;">{{item.real_name}}</div>
                      <div class="" style=" color: #999999;max-width: 70px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; margin-left: 5px;">{{item.phone}}</div>
                   </div>
                   <div class="text" style="margin-bottom: 5px; color: #999999;font-weight: 500;margin-top: 5px;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.province}}{{item.city}}{{item.country}}{{item.district ? item.district : ''}}{{item.detail}}</div>
                </div>
                <div class="edit-box" style="margin-right: 5px;">
                  <span @click="edit(item)" style="color: #f89900; cursor: pointer;">{{$t('page.users.userAddressList.edit')}}</span>
                  <span @click="bingDelete(item,index)" style="color: #f89900; cursor: pointer;">{{$t('page.users.userAddressList.del')}}</span>
                </div>
              </div>


              <!-- <span @click="bindDefault(item)" v-if="item.is_default !=1">{{$t('page.index.setaddress')}}</span> -->
              <!-- <div class="moren" v-if="item.is_default ==1">{{$t('page.goodsSearch.Default')}}</div> -->
            </li>
          </div>
          <div v-else class="el-empty">
            <div class="">
              <img src="~assets/images/noorder.png" alt="">
              <p style="color: #909399;">{{$t('page.user.Nodatafound')}}</p>
            </div>
          </div>
       </div>
       <div @click="addAddress" class="add-btn" style="display: flex; align-items: center; justify-content: center;">
          <span style="font-weight: 400;font-size: 18px;color:#f89900;">+ {{$t('page.user.Addnewaddress')}}</span>
       </div>
     </div>
     <el-dialog
       :title="$t('page.users.userAddressList.add')"
       :visible.sync="dialogVisible"
       width="700px"
       :before-close="handleClose"
       >
         <div class="form-box">
           <div class="input-item" style="width: 48%;display:inline-block">
             <el-input v-model="formData.name" maxlength="25" :placeholder="$t('page.users.userAddress.name')"></el-input>
           </div>
           <div class="input-item" style="width: 48%;display:inline-block;margin-left: 3%">
             <el-input v-model="formData.phone" :placeholder="$t('page.users.userAddress.phone')"></el-input>
           </div>
           <!-- <div class="input-item text-wrapper">
             <p @click="bindAdd(false)" v-if="!cityData.province.name">请选择省/市/区/街道</p>
             <p @click="bindAdd(true)" v-if="cityData.province.name" style="color: #333">
               <span v-if="cityData.province.name">{{cityData.province.name}}</span>
               <span v-if="cityData.city.name">/{{cityData.city.name}}</span>
               <span v-if="cityData.county.name">/{{cityData.county.name}}</span>
               <span v-if="cityData.district.name">/{{cityData.district.name}}</span>
             </p>
             <div class="select-wrapper" v-if="isShowSelect">
               <div class="title-box" v-if="!cityData.province.id">选择省/自治区</div>
               <div class="title-box" v-if="cityData.step == 2">
                 <span>{{cityData.province.name}}</span>选择市
               </div>
               <div class="title-box" v-if="cityData.step == 3">
                 <span>{{cityData.county.name}}</span>
                 <span>{{cityData.city.name}}</span>选择区县
               </div>
               <div class="title-box" v-if="cityData.step == 4 && !stepStop">
                 <span>{{cityData.city.name}}</span>
                 <span>{{cityData.county.name}}</span>请选择配送区域
               </div>
               <div class="label-txt">
                 <span v-for="(item,index) in cityData.list" :key="index" @click.stop="bindCity(item)" :class="{on:cityData.pid == item.id}">{{item.name}}</span>
               </div>
             </div>
           </div> -->
           <div class="input-item">
             <el-input type="textarea" rows="3" v-model="formData.con" :placeholder="$t('page.users.userAddress.address')"></el-input>
           </div>
           <div class="input-item">
             <el-checkbox v-model="formData.checked">{{$t('page.users.userAddress.default')}}</el-checkbox>
           </div>
         </div>
         <span slot="footer" class="dialog-footer">
           <el-button @click="handleClose">{{$t('page.goodsDetail.cancel')}}</el-button>
           <el-button type="primary" @click="bindSubmit">{{$t('page.goodsDetail.confirm')}}</el-button>
         </span>
     </el-dialog>
  </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {Message, MessageBox} from "element-ui";
export default {
    name: "orderList",
    auth: "guest",
    scrollToTop: true,
    data() {
      return {
        tabCur: '',
        tabList: [
          {
            title: this.$t('page.user.allorders'),
            key: '-2'
          },
          {
            title: this.$t('page.user.orderStatus[0].name'),
            key: '0',
            numberName: 'unpaid_count'
          },
          {
            title: this.$t('page.user.orderStatus[1].name'),
            key: '0',
            numberName: 'unshipped_count'
          },
          {
            title: this.$t('page.user.orderStatus[2].name'),
            key: '1',
            numberName: 'received_count'
          },
          {
            title: this.$t('page.index.tocomment'),
            key: '2',
            numberName: 'evaluated_count'
          }
        ],
        orderList: [
        ],
        orderData: {},
        orderStatus: -1,
        total:0,
        page: 1,
        limit: 10,
        userInfo:{},
        ImageShow:false,
        list:[],
        listcount:0,
        storeList:[],
        storeListcount:0,
        list:[],
        page:1,
        limit:20,
        isShowSelect:false,
        dialogVisible:false,
        stepStop: false,
        editId:0,
        formData:{
          name:'',
          phone:'',
          con:'',
          checked:false
        },
        cityData:{
          pid:0,
          step:1,
          list:[],
          con:'',
          province:{},
          city:{},
          county: {},
          district:{}
        },
        selectedIndex: -1,
        selectedArr: []
      }
    },
    fetch({ store }) {
      store.commit("isBanner", false);
      store.commit("isHeader", true);
      store.commit("isFooter", true);
    },
    head() {
      return {
        title: this.$t('page.users.orderList.navTitle') + "-"+this.$store.state.titleCon
      }
    },
    beforeMount() {
      this.getUserInfo();
      this.getGoodsList()
    },
    mounted() {
      Promise.all([this.getList(), this.getNumber()])
      this.getList1()
    },
    methods: {
      getList1(){
        this.$axios.get('/api/user/address/lst').then(res=>{
          this.list = res.data.list
        })
      },
      addAddress(){
        this.editId = 0
        this.dialogVisible = true
        if(this.cityData.step !== 3) this.getCityList(0,null)
      },
      handleClose(){
        this.formReset()
        this.dialogVisible = false
        this.isShowSelect = false
      },
      bindAdd(isReset){
        if(isReset){this.cityData.step = 1;this.stepStop = false}
        this.isShowSelect = !this.isShowSelect
        if(this.cityData.step == 4 || this.stepStop){
          return
        }else{
          this.cityData.city = {}
          this.cityData.district ={}
          this.cityData.province ={}
          this.cityData.county ={}
          this.getCityList(0,null)
        }
      },
      getCityList(pid,fun){
        this.cityData.list = []
        this.$axios.get('/api/v2/system/city/lst/'+pid).then(res=>{
          this.cityData.list= res.data
          fun && fun()
        })
      },
      // 选择城市
      bindCity(item){
        let that = this;
        if(that.cityData.step == 4){
          that.cityData.district = item
          that.selectedArr.push(item);
          that.isShowSelect = false
        }else {
          if(that.cityData.step == 1){
            that.cityData.province = item
            that.getCityList(item.id,null)
            that.selectedArr = [item];
            that.cityData.step++
            return
          }else{
            if(that.cityData.step == 2){
              that.cityData.city = item
              that.getCityList(item.id,null)
              that.cityData.step++
              that.selectedArr.push(item);
              return
            }
            if(that.cityData.step == 3){
              that.cityData.county = item
              that.selectedArr.push(item);
              that.cityData.step++
              that.getCityList(item.id,function(){
                if(that.cityData.list && that.cityData.list.length){
                  that.stepStop = false
                  return
                }else{
                  that.stepStop = true
                  that.isShowSelect = false
                  return
                }
              })
            }
          }
        }
      },
      bindSubmit(){
        if(!this.formData.name){
          return Message.error(this.$t('page.index.yourname'))
        }
        if(!this.formData.phone || !/^[0-9+*\s]{4,26}$/i.test(this.formData.phone)){
          return Message.error(this.$t('page.index.Pleasecorrectmobile'))
        }
        // if(!this.cityData.province.name){
        //   return Message.error('请选择省市区')
        // }
        if(!this.formData.con){
          return Message.error(this.$t('message.login.detail'))
        }
        this.$axios.post('/api/user/address/create',{
          // province:this.cityData.province.name,
          // city:this.cityData.city.name,
          // district:this.cityData.district.name,
          // city_id:this.cityData.city.city_id,
          area: this.selectedArr,
          is_default:this.formData.checked?1:0,
          real_name:this.formData.name,
          phone:this.formData.phone,
          detail:this.formData.con,
          address_id:this.editId
        }).then(res=>{
          this.dialogVisible = false
          this.getList1()
          this.formReset()
          return Message.success(this.$t('page.index.addedsuccessfully'))
        }).catch(err=>{
          return Message.error(err);
        })
      },
      // 设为默认
      bindDefault(item){
        this.$axios.post('/api/user/address/update/'+item.address_id).then(res=>{
          this.getList1()
          return Message.success(this.$t('message.login.setSU'))
        })
      },
      // 删除
      bingDelete(item,index){
        MessageBox.confirm(this.$t('page.index.tipsaddressdelete')).then(res=>{
          this.$axios.post('/api/user/address/delete/'+item.address_id).then(data=>{
            this.getList1()
            return Message.success(this.$t('message.login.delSU'))
          }).catch(err=>{
            return Message.error(err);
          })
        })
      },
      // 编辑
      edit(item){
        this.dialogVisible = true
        this.$axios.get('/api/user/address/detail/'+item.address_id).then(res=>{
          let data = res.data
          this.formData.name = data.real_name
          this.formData.phone = data.phone
          this.formData.con = data.detail
          this.formData.checked = data.is_default?true:false
          this.cityData.province.name = data.area && data.area.length && data.area[0] ? data.area[0].name : ''
          this.cityData.city.name = data.area && data.area.length && data.area[1] ? data.area[1].name : ''
          this.cityData.county.name = data.area && data.area.length && data.area[2] ? data.area[2].name : ''
          this.cityData.district.name = data.area && data.area.length && data.area[3] ? data.area[3].name : ''
          this.editId = data.address_id
          this.cityData.city.city_id = data.city_id
        })
      },
      // 表单重置
      formReset(){
        this.formData.name = ''
        this.formData.phone = ''
        this.formData.con = ''
        this.formData.checked = false
        this.cityData.province = {}
        this.cityData.city = {}
        this.cityData.district = {}
        this.cityData.step = 1
        this.cityData.pid = 0
      },
      goRecharge(){
        this.$router.push({
          path: `recharge?type=4`,
        });
      },
      goReflect(){
        this.$router.push({
          path: `reflect?type=4`,
        });
      },
      // 店铺收藏
      getStoreList(){
        this.$axios.get('/api/user/relation/merchant/lst',{
          params:{
            page:this.page,
            limit:this.limit
          }
        }).then(res=>{
          this.storeList = res.data.list
          this.total = res.data.count
          this.storeListcount = res.data.count
        })
      },
      //商品收藏
      getGoodsList(){
        this.$axios.get('/api/user/relation/product/lst',{
          params:{
            page:this.page,
            limit:this.limit
          }
        }).then(res=>{
          this.list = res.data.list
          this.total = res.data.count
          this.listcount = res.data.count
        })
      },
      Image(){
        this.ImageShow = !this.ImageShow
      },
      getUserInfo(){
        this.$axios.get("/api/user").then(res=>{
          this.userInfo = res.data;
        })
      },
      //  再次购买
      goOrderConfirm(order) {
        const data = order.orderProduct.map(pro => {
          return {
            cart_num: pro.product_num,
            product_attr_unique: pro.product_sku,
            product_id: pro.product_id
          }
        });
        let that = this;
        that.$axios
          .post("/api/user/cart/again", {
            data
          })
          .then(res => {
            that.$router.replace({
              path: "/order_confirm",
              query: {new: 1, cartId: res.data.cart_id.join(',')}
            });
          });
      },
      // 选项卡
      bindTab(status){
        this.orderStatus = status;
        this.page = 1
        this.$set(this, 'orderList', []);
        if(status == 0) {
          this.getUnPayList();
        }else{
            this.getList();
        }
      },
      // 获取订单个数
      getNumber() {
        this.$axios.get('/api/order/number').then(res => {
            this.orderData = res.data;
        //   for (var i in res.data) {
        //     this.tabList.forEach(tab => {
        //       if (i == tab.numberName) {
        //         tab.num = res.data[i]
        //       }
        //     })
        //   }
        })
      },
      // 获取订单列表
      getList() {
        this.$axios.get('/api/order/list',{
          params:{
            status:this.orderStatus-1,
            page:this.page,
            limit:this.limit
          }
        }).then(res => {
          this.orderList = res.data.list
          this.total = res.data.count
        })
      },
      //待付款订单列表
      getUnPayList(){
        this.$axios.get('/api/order/group_order_list',{
          params:{
            page:this.page,
            limit:this.limit
          }
        }).then(res => {
          this.orderList = res.data.list
          this.total = res.data.count
        })
      },
      // 取消订单
      cancelOrder(item,index){
        MessageBox.confirm(this.$t('page.index.surecancelorder'),this.$t('message.login.prompt')).then(res=>{
          this.$axios.post('/api/order/cancel/'+item.group_order_id).then(data=>{
            this.getUnPayList()
            this.getNumber()
            return Message.success(data.message)
          })
        })
      },
      // 查看详情
      goDetail(item){
        if(this.orderStatus === 0){
            this.$router.push({
                path: `/order_stay_detail`,
                query:{
                    orderId:item.group_order_id
                }
            })
        }else{
            this.$router.push({
                path: `/order_detail`,
                query:{
                    orderId:item.order_id
                }
            })
        }

      },
      // 去评价
      goEvaluation(item){
        this.$router.push({
          path: `/evaluation`,
          query:{
            unique:item.unique
          }
        })
      },
      // 去退款
      goRefound(item){
        this.$router.push({
          path: `/refund_confirm`,
          query:{
            orderId:item.order_id
          }
        })
      },
      // 去物流
      goLogistics(item){
        this.$router.push({
          path: `/logistics`,
          query:{
            orderId:item.order_id
          }
        })
      },
      // 确认收货
      confirmOrder(item, index){
          let that = this;
          MessageBox.confirm(this.$t('page.index.tips3'),this.$t('message.login.prompt')).then(res=>{
            this.$axios.post('/api/order/take/'+item.order_id).then(data=>{
                that.orderList.splice(index, 1);
                that.getNumber();
                that.getList();
                return Message.success(data.message)
            })
        })
      },
      // 分页点击
      bindPageCur(data){
        this.page = data
        if(this.orderStatus == 0){
            this.getUnPayList();
        }else{
            this.getList()
        }
      },
      // 立即支付
      goBuy(item){
        this.$router.push({
          path:'/payment',
          query:{
            result:item.group_order_id
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .input-item{
    margin-bottom: 20px;
  }
  .add-btn{
    background-color: #fafafa;
        height: 85px;
        border: 1px solid #f3f3f3;
        border-radius: 4px;
        margin-top: 20px;
        cursor: pointer;
      &:hover{
       background-color: #fff;
      }
  }
  .recharge{
    margin-left: 52px;
    width: 250px;
    display: flex;
    flex-direction: column;
    .box-btn{
          background-color: #fafafa;
          border: 1px solid #eee;
          border-radius: 4px;
          height: 85px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #333;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          cursor: pointer;
          transition-duration: .3s;
    }
  }
  .instrumentPanel{
    display: flex;
    padding: 20px 0 0 50px;
    .balance{
      width: 250px;
          height: 85px;
          text-align: center;
          background: url(../../utils/img/plan.png);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
    }
    .count-item{
      width: 248px;
          height: 83px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #fafafa;
          text-align: center;
          margin-bottom: 20px;
          border: 1px solid #eeeeee;
          cursor: pointer;
    }
    .visit{
      width: 250px;
      border: 1px solid #eeeeee;
      .visit-title{
        width: 100%;
            height: 49px;
            line-height: 50px;
            font-size: 14px;
            border-bottom: 1px solid #eeeeee;
            padding-left: 12px;
            // margin-bottom: 10px;
      }
      .el-empty{
        display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
            box-sizing: border-box;
            padding: 40px 0;
      }
    }
  }
  .MyOrder{
      height: 35px;
      display: flex;
      align-items: center;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      padding: 0 20px;
      background-color: #eee;
      border-radius: 5px;
      color: #999;
    }
  .user-com-tab {
    .item {
      padding: 0 20px;
    }
  }
  .user-order-list {
    li {
      position: relative;
      padding: 30px 0 26px;
      border-bottom: 1px solid #ECECEC;
      .refund-icon{
        position: absolute;
        right: 50px;
        top: 40px;
      }
      .bd {
        padding-right: 40px;
        border-bottom: 1px dashed #E1E1E1;
        cursor: pointer;
        .order-txt {
          color: #282828;
          font-size: 14px;
          .mer_name{
            display: inline-block;
            margin-left: 40px;
            color: #666666;
            &:hover{
              color: #E93323;
            }
          }
          .status {
            float: right;
            color: #f89900;
          }
        }
        .content {
          margin-top: 20px;
          .goods-item {
            display: flex;
            position: relative;
            margin-bottom: 20px;
            align-items: center;
            .img-box {
              width: 120px;
              height: 120px;
              position: relative;
              span {
                display: block;
                width: 100%;
                text-align: center;
                font-size: 12px;
                line-height: 18px;
                background: rgba(0,0,0,.5);
                position: absolute;
                left: 0;
                bottom: 0;
                color: #fff;
              }
              img {
                display: block;
                width: 100%;
                height: 100%;
              }
            }
            .info-txt {
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 500px;
              margin-left: 24px;
              font-size: 14px;
              .info{
                font-size: 12px;
                color: #aaa;
                margin-top: 4px;
              }
              .price {
                margin-top: 10px;
                color: #E93323;
              }

            }
            .develity_date{
              color: #FD6523;
              margin-top: 6px;
              font-size: 14px;
            }
            .num {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                color: #999999;
              }
          }
        }
      }
      .foot {
        padding-top: 26px;
        padding-right: 32px;
        p {
          text-align: right;
          color: #666;
          font-size: 14px;
          .price {
            color: #E93323;
          }
        }
        .btn-wrapper {
          display: flex;
          justify-content: flex-end;
          margin-top: 20px;
          div {
            width: 110px;
            height: 36px;
            text-align: center;
            line-height: 34px;
            margin-left: 20px;
            border: 1px solid #999999;
            border-radius: 4px;
            font-size: 14px;
            color: #666666;
            cursor: pointer;
            &.pay {
              border-color: #f89900;
              background: #f89900;
              color: #fff;
            }
          }
        }
      }
    }
  }
  .pages-box{
    margin-top: 30px;
    text-align: right;
  }
</style>
